<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/admin/presetItems' }">案例管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{projectBreadCrumbBack}} - 案例源码</el-breadcrumb-item>
            </el-breadcrumb>
            <bread-crumb-back></bread-crumb-back>
        </div>
        <div class="content-box">
            <div class="code-breadcrumb">
                <div class="breadcrumb-icon">
                    <router-link to="/admin/projectSourceCode">
                        <img src="./../../assets/images/breadcrumb_icon2.png" />
                    </router-link>
                </div>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item v-for="(item, index) in pathArr" @click.native="breadCrumbFn(item,index)" :key="index">{{ item }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="table-content" v-loading="tableLoading" v-if="showFlag">
                <el-table
                :data="tableData"
                border
                style="width: 100%">
                    <el-table-column label="文件夹名称">
                        <template slot-scope="scope">
                            <span style="cursor: pointer;" v-if="scope.row.fileFlag && !scope.row.fileDetailFlag">{{ scope.row.name }}</span>
                            <span style="cursor: pointer;" v-else-if="!scope.row.fileFlag" @click="goLink(scope.row.path)">{{ scope.row.name }}</span>
                            <span style="cursor: pointer;" v-else-if="scope.row.fileDetailFlag" @click="goDetail(scope.row.path)">{{ scope.row.name }}</span>
                            <a :href="'/dataplatform/common/fileDownload?path='+scope.row.path" v-show="!scope.row.fileDetailFlag && scope.row.fileFlag" class="iconfont icon-unie122"></a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="modifiedTime" label="文件更新时间">
                    </el-table-column>
                </el-table>
            </div>
            <div class="code-ide" v-if="!showFlag">
                <div class="ide-title">
                    <img src="./../../assets/images/ide_icon.png" />
                    {{ ideTitle }}
                </div>
                <div class="ide-content">
                        <p style="line-height:28px; overflow: hidden;" v-for="(item, index) in ideContentData">
                            <span style="display:block; width:50px; float:left; margin-right:10px;">{{ index+1 }}</span> {{ item }}
                        </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    export default {
        components: {
            BreadCrumbBack
        },
        data () {
            return {
                projectId: '',
                //面包屑name
                projectBreadCrumbBack: '',
                tableLoading: false,
                tableData: [],
                path: '',
                pathArr: [],
                showFlag: true,
                ideTitle: '',
                ideContentData: []
            }
        },
        created () {
            const idJson = window.localStorage.getItem('teacher-project-ida')|| window.localStorage.getItem('teacher-project-id');
            this.projectId = JSON.parse(idJson).itemId
            this.projectBreadCrumbBack = this.$store.state.projectBreadCrumbBack
            this.path = this.$route.query.path
            this.pathArr.push(this.path)
            this.init(this.path)
        },
        methods: {
            init(path){
                let self = this
                let pathTool =  /\/?([^# ]*)/
                self.$http.get('/dataplatform/sourceCode/getDirectoryInfo?itemId='+self.projectId+'&path='+path).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage
            },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
				this.multipleSelection = valArr
            },
            goLink(path){
                let pathSplit = path.split('/')
                this.pathArr = pathSplit
                this.init(path)
            },
            breadCrumbFn(item,index){
                if(index == (this.pathArr.length-1)) return
                this.showFlag = true
                this.pathArr = this.pathArr.splice(0,index+1)
                let path = ''
                for (let i = 0; i < this.pathArr.length; i++) {
                    if(i == 0){
                        path = path + this.pathArr[i]
                    }else{
                        path = path + '/' + this.pathArr[i]
                    }

                }
                this.init(path)
            },
            //跳转详情
            goDetail(path){
                this.showFlag = false
                let pathSplit = path.split('/')
                this.pathArr = pathSplit
                this.ideTitle = this.pathArr[this.pathArr.length-1]

                this.$http.get('/dataplatform/sourceCode/getFileContent?path='+path).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        this.ideContentData = res.data
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>
